<template>
  <Header></Header>
    <div class="fixed">
      <div class="bgColor">
        <h1 class="main-shopcart">购物车</h1>
      </div>
      <div class="container">
        <div class="main">
          
        
          <el-table :data="showList" stripe style="width: 100%"  >
          <el-table-column label="全选" type="selection"  >
            <template v-slot:header>
        <el-checkbox v-model="isAllSelected" @change="handleAllSelectionChange">全选</el-checkbox>
      </template>
          </el-table-column>
            <el-table-column  label="商品图片">
              <img src="../assets/images/flower.jpg" style="height:100px;width: 100px;cover;margin-left: 30px"/>
               </el-table-column>
             <el-table-column prop="cartProductName" label="商品名称" width="150px"></el-table-column>
             <el-table-column prop="cartProductPrice" label="单价" :show-overflow-tooltip="true"></el-table-column>
             <el-table-column prop="cartProductSale" label="数量">
             </el-table-column>
             <el-table-column prop="cartPrice" label="金额" width="150px"></el-table-column>
             <el-table-column label="操作" width="180px">
             <!-- 编辑按钮 -->
              <el-button type="warning" @click="deleteCart" >删除商品</el-button>
             </el-table-column>
             </el-table>
          
            
          <ul class="foot">
            <li class="foot-item">已选<span class="unique">{{showList.length}}</span></li>
            <li class="foot-item" >合计<span class="unique">{{ calculateTotalPrice}}</span></li>
            <li >
              <button class="btn">去结算</button>
            </li>
          </ul>
         
        </div>
      </div>
    </div>
    <div class="pagination">
				   <el-pagination  small background layout="total,prev, pager, next"
					:total="totalItems"
					:page-size="pageSize"
					v-model:current-page="currentPage"
					@current-change="handleCurrentChange"
					style="margin-top: 20px;margin-left: 40%;" />
			</div>
  <Foot></Foot>
</template>

<script setup lang="ts">
//组件

import {getShopCarList,del} from '@/api/shoppingcart'
import { onBeforeMount,onMounted, ref } from "vue";
import {useCartStore} from '@/stores/cart'
import { storeToRefs } from 'pinia';
let cartStore = useCartStore();
let {  checkAll , total  , select ,all} = storeToRefs(cartStore);
import { ElMessageBox } from 'element-plus';
import { ElMessage } from 'element-plus';
// let cartStore=useCartStore();
// onBeforeMount(() => {
//   getShopCarList().then(res=>{
//     cartStore.addCart(res.data.list);
//     console.log(res.data.list);
    
//   })
// }),
const pageSize = ref([])
const dataList=ref([])//取到的结果
const showList=ref([])//分页展示列
const currentPage = ref(1)
const totalItems = ref(1)
const cartList=ref([])
const fillist = ref()
const keyWord=ref('')
const page = ref({//配置对应的查询参数
      pageNum: 1,
      pageSize: 30,
    });
const handleCurrentChange = (val: number) => {
console.log(`current page: ${val}`)
page.value.pageNum = val
console.log(page)
getCart(page);
}
function getCart(p){
	getShopCarList(p).then((res) => {
	console.log("页面查询结果",res)
		 cartList.value = res.data
		 showList.value = cartList.value.records
		 console.log("cartList",showList.value)
		 // navigatePages
		 totalItems.value=cartList.value.total
		 currentPage.value = cartList.value.current
		 pageSize.value = cartList.value.size
		 console.log("current",currentPage.value)
		 })
		 }
	
     getCart(page);
    const isAllSelected = ref(false);
    const totalSelected = ref(0);

  const handleAllSelectionChange = (value) => {
  isAllSelected.value = value;
  totalSelected.value = value ? showList.value.length : 0;
  console.log('isAllSelected:', isAllSelected.value);
  console.log('totalSelected:', totalSelected.value);
};
import { computed } from 'vue';

const calculateTotalPrice = computed(() => {
  return showList.value.reduce((total, item) => {
    return total + (item.cartProductPrice * item.cartProductSale);
  }, 0);
});
//   const fnCheckAll = ()=>{
//   if( checkAll.value ){
//     cartStore.unAll();
//   }else{
//     cartStore.all();
//   }
// }

const deleteCart =(cartId)=>{
  ElMessageBox.confirm('确定删除该课程吗？', '删除', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      createToken().then(res=>{
        let token = res.data.token;
        del({
          cartId
        },token)
      })
      ElMessage.success({
        message: '删除成功!'
      });
    }).catch(() => {
      ElMessage.info({
        message: '已取消删除'
      });
    });
}

</script>
<style scoped>
.fixed{
  width: 100%;
  height: 100%;
  background: #FFFFFF;
}
.bgColor{
  width: 100%;
  height: 200px;
  background-color: red;
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
}
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
.container{
  width: 1200px;
  margin: -100px auto 50px auto;
  background: #EBEDF2;
  border-radius: 12px;
  box-shadow: 0px 2px 5px #888888;
}
.main{
  padding:20px;
  border-radius: 5px;
}
.main-shop{
  position: relative;
  display: flex;
  align-content: center;
}
.main-shop i{
  font-size: 35px;
  padding: 20px 10px 0 0;
  color: #FF4400;
  font-weight: bold;
}
.main-shopcart{
  width: 1200px;
  margin: 0 auto;
  height: 42px;
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 35px;
  color: #FFFFFF;
  padding: 30px 0;
  opacity: 1;
}
.nav{
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #E6E6E6;

}
.nav .left{
  width: 80px;
  height: 26px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 0px;
  color: #FF4400;
  opacity: 1;
  border-bottom: 2px solid #FF4400;
}
.nav .right{
  width: 108px;
  height: 24px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 0px;
  color: #333333;
  opacity: 0.5;
}

/* 头部开始 */
.head{
  display: flex;
  padding: 0 10px;
  margin: 20px 0;
  width: 100%;
  height: 35px;
  line-height: 35px;
  background: #FCFCFC;
  opacity: 1;
  border-radius: 0px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 2px 5px 2px #cccccc;
}
.head .item{
  width: 150px;
  font-size: 14px;
  color: #333333;
}
.check .all{
  margin-right: 10px;
}
.check .text{
  width: 1487px;
  height: 40px;

}
.classInfo{
  width: 400px!important;
  color: #333333;
}
/* 头部结束 */

/* 订单开始 */
.haveorder{
  display: flex;
  width: 100%;
  height: 200px;
  background: #FCFCFC;
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: 0px 2px 5px 2px #cccccc;
}
.haveorder .order-item{
  height: 200px;
  line-height: 200px;
  margin:  5px;
}
.order-item:first-child{
  width: 30px;
}
.order-item{
  width: 150px;
  font-size: 16px;
  color: #333333;
}
.totoalprice{
  color: #E2231A;
}
.num{
  width: 120px !important;
  padding-left: 15px;
}
.info{
  display: flex;
  width: 470px !important;
  height: 200px;
  line-height: 200px;
}
.courseimg{
  margin:40px 20px 40px 0;
  width: 200px;
  height: 120px;
}
.courseimg img{
  width: 100%;
  height: 100%;
}
.info .course-name{
  width: 300px;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.delete{
  cursor: pointer;
}
.deletd-text{
  margin-left: 5px;
}

/* 订单结束 */

/* 暂无订单开始 */
.noOrder{
  width: 100%;
  height: 100%;
  text-align: center;
  margin:200px 0;
}
.order-alert{
  height: 31px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 0px;
  color: #B5B9BC;
  opacity: 1;
  margin:20px 120px;

}
/* 暂无订单结束 */
.foot{
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 40px;
  line-height: 40px;
  color: #333333;
  margin-bottom: 10px;
}
.foot-item{
  width: 120px;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  font-weight: 400;
  color: #333333;
}
.unique{
  margin-left: 5px;
  font-size: 24px;
  color: #FF4400;
}
.btn{
  width: 120px;
  height: 40px;
  margin-left: 20px;
  border: none;
  color: #FFFFFF;
  font-size: 22px;
  border-radius: 5px;
  background: #FF4400;
  cursor: pointer;
  box-shadow: 0px 3px 5px 2px #ff727f;
}
</style>